<script setup lang="ts">
import { Bell, CircleCloseFilled, Guide } from "@element-plus/icons-vue";
import btn from "@/utils/buttonInterface";
import { ElMessage } from "element-plus";
import { Obj_isEmpty } from "@/utils/utils";
import * as utils from "@/utils/utils";

// 常量
let symMapping: Map<string, string>;

// 响应式变量
const entName = ref<string>("");
const loading = ref<boolean>(false);
const refreshLoading = ref<boolean>(false);
const tableRes = ref<strPair[]>([]);
const jsonRes = ref<Object>({});

const refreshEntCache = async () => {
  refreshLoading.value = true;
  try {
    let temp = await btn.ent.refreshEntCache();
    if (temp == 1) {
      ElMessage({
        showClose: true,
        message: "缓存刷新成功！！",
        type: "success",
        icon: Bell,
        duration: 3000,
      });
    } else {
      ElMessage({
        showClose: true,
        message: "缓存更新报错！！",
        type: "error",
        icon: CircleCloseFilled,
        duration: 3000,
      });
    }
    refreshLoading.value = false;
  } catch (error) {
    refreshLoading.value = false;
    ElMessage({
      showClose: true,
      message: "缓存更新报错！！",
      type: "error",
      icon: CircleCloseFilled,
      duration: 3000,
    });
  }
};

const requestEntSeg = async () => {
  // 清空上一轮的数据
  jsonRes.value = {};
  tableRes.value = [];
  if (utils.Str_isEmpty(entName.value)) return;
  loading.value = true;
  try {
    let temp = await btn.ent.enterpriseServices(entName.value);
    tableRes.value = formatEntResult(temp.parseResult);
    jsonRes.value = temp;
    loading.value = false;
  } catch (error) {
    jsonRes.value = {
      Error: "Error!",
      content: error,
    };
    loading.value = false;
  }
};

function formatEntResult(pojo: ResultEnterprisePojo): strPair[] {
  if (Obj_isEmpty(pojo)) return [];
  return Object.entries(pojo)
    .filter(([_, value]) => value)
    .map(([name, data]) => ({
      name: symMapping.get(name) ?? "undefined",
      data: data,
    }));
}

// 组件挂载成功
onMounted(() => {
  symMapping = new Map();
  symMapping.set("attr0", "attr0:{非关注段}");
  symMapping.set("attr1", "attr1:{注册地（registerPlace）}");
  symMapping.set("attr2", "attr2:{名字（companyName）}");
  symMapping.set("attr3", "attr3:{行业类别（industryType）}");
  symMapping.set("attr4", "attr4:{表示组织形式（orgForm）}");
  symMapping.set("attr5", "attr5:{分部（companyBranch）}");
  symMapping.set("attr6", "attr6:{所在地（companyPlace）}");
  symMapping.set("attr9", "attr9:{编号}");
  symMapping.set("isNormal", "isNormal:{普通的公司名Flag}");
});

// 组件卸载时
onUnmounted(() => {
  symMapping.clear();
});
</script>

<template>
  <MainPage>
    <template v-slot:headerTitle>
      <Lv1stTitle title="单位分词"></Lv1stTitle>
      <PrettyBtn
        style="margin-left: auto"
        :loading="refreshLoading"
        :on-click="refreshEntCache"
        :btn-name="'刷新缓存'"
      />
    </template>

    <template v-slot:decoration>
      <TopBar />
    </template>

    <template v-slot:contents>
      <Contents :class="{ entWinc: entName === '' }">
        <template v-slot:inputComp>
          <MyInput
            v-model:value="entName"
            input-tips="请输入完整单位名称..."
            btn-name="分词"
            :btn-icon="Guide"
            :loading="loading"
            :on-click-event="requestEntSeg"
          />
        </template>
        <template v-slot:dataShow>
          <transition name="fade">
            <CarouselResView
              :show-data-json="jsonRes"
              :show-data-table="tableRes"
              :loading="loading"
              v-if="entName != ''"
            />
          </transition>
          <transition name="fade">
            <TableLoading1
              :style="{ top: '50%' }"
              :message="''"
              v-if="entName === ''"
            />
          </transition>
        </template>
      </Contents>
    </template>
  </MainPage>
</template>

<style scoped>
.entWinc :deep(.Contents_mt-2) {
  background-color: rgba(84, 92, 100, 0);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
